<template>
    <div class="home-wrapper">
        <div class="filters-wrapper" v-loading="loading">
            <el-row type="flex" align="middle" style="flex-wrap: wrap;margin-bottom: 5px;position: relative;">
                <div class="form-wrapper">
                    <span class="filter-label">部门：</span>
                    <el-select v-model="depart_search" placeholder="请选择" size="small" class="select-wrapper">
                        <el-option v-for="item in departlistall" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="form-wrapper">
                    <span class="filter-label">负责人：</span>
                    <el-select v-model="manager_search" placeholder="请选择" size="small" class="select-wrapper">
                        <el-option v-for="item in managerlist" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="form-wrapper">
                <el-input placeholder="请输入项目名称" size="small" v-model="jd_search" class="input-with-select">
                    <el-button @click="loadProjectListData" slot="append" icon="el-icon-search"></el-button>
                </el-input>
                </div>
                <div v-if="isAdmin" class="cus-but">
                    <el-button type="primary" size="mini" @click="newProject">创建项目</el-button>
                </div>
                <el-dialog :title="projectform.id > 0 ? '修改项目' : '创建项目'" :visible.sync="addproject" :close-on-click-modal="false" width="30%" center>
                    <el-row type="flex" align="middle" justify="center">
                        <el-form label-width="100px" :model="projectform" :rules="projectRules" ref="projectform" style="width: 85%;">
                            <el-form-item class="is-required" label="项目名称：" prop="name">
                                <el-input v-model="projectform.name" placeholder="请输入项目名称" size="small" />
                            </el-form-item>
                            <el-form-item class="is-required" label="所属部门：" prop="depart">
                                <el-select v-model="projectform.id_depart" filterable placeholder="选择部门" size="small"
                                    style="width: 100%;">
                                    <el-option v-for="item in departlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="is-required" label="负责人：" prop="manager">
                                <el-select v-model="projectform.id_manager" filterable placeholder="选择负责人" size="small"
                                    style="width: 100%;">
                                    <el-option v-for="item in userlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-row type="flex" align="middle" justify="center">
                        <el-button size="small" @click="addproject = false">取 消</el-button>
                        <el-button size="small" type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="addProject">{{projectform.id > 0 ? '修改' : '添 加'}}</el-button>
                    </el-row>
                </el-dialog>
            </el-row>
            <el-table :data="projectlist" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}" style="width: 100%">
                <el-table-column prop="name" label="项目名称" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isset != true">
                        <router-link :class="'editcolor_'+ scope.row.state" :to="{ path: 'details/' + scope.row.id }">{{scope.row.name}}</router-link>
                        <el-button :class="'editcolor_'+ scope.row.state" v-if="scope.row.is_update == 1 && scope.row.state" type="text" @click="modifyName(scope.$index, scope.row)" style="margin-left: 5px;" size="mini" icon="el-icon-edit"></el-button>
                        </div>
                        <div v-if="scope.row.isset == true">
                        <el-input v-model="scope.row.newname" v-show="scope.row.isset" size="small" style="width: 200px;">
                        </el-input>
                        <el-button type="text" @click="postModifyName(scope.$index, scope.row)" style="margin-left: 5px;" size="mini" icon="el-icon-circle-check"></el-button>
                        <el-button type="text" @click="cancelModifyName(scope.$index, scope.row)" style="margin-left: 5px;" size="mini" icon="el-icon-circle-close"></el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="staff" label="参与人员" align="center">
                </el-table-column>
                <el-table-column prop="depart" label="部门" align="center">
                </el-table-column>
                <el-table-column prop="manager" label="负责人" align="center">
                </el-table-column>
                <!-- <el-table-column prop="state" label="状态" width="150px" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" @change="changeStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column> -->
                <el-table-column prop="operation" width="150px" label="操作" align="center">
                    <template slot-scope="scope" v-if="scope.row.is_update == 1">
                    <el-dropdown trigger="click" style="cursor: pointer;">
                        <span class="el-dropdown-link">
                            <i class="el-icon-setting" style="font-size: 17px;color:#409EFF"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" v-if="scope.row.is_update == 1">
                            <el-dropdown-item>
                            状态：<el-switch v-model="scope.row.state" @change="changeStatus(scope.row)"></el-switch></el-dropdown-item>
                            <el-dropdown-item>操作：<el-button size="mini" @click="modifyProject(scope.row)">修改</el-button></el-dropdown-item>
                            <el-dropdown-item>操作：<el-button size="mini" type="danger" @click="deleteProject(scope.$index, scope.row)">删除</el-button></el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <!-- <template slot-scope="scope">
                        <el-button v-if="scope.row.is_update == 1" size="mini" type="danger" @click="deleteProject(scope.$index, scope.row)">删除</el-button>
                    </template> -->
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :current-page.sync="curPage" :total="projectTotal" :page-size="pageSize" @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
        </div>

        <!-- 分割线 -->


    </div>
</template>
<style>

</style>
<script>

import { pageParams,isMember } from '@/settings'
    export default {
        data() {
            return {
                loading: false,
                jd_search:'',
                addproject: false,
                fullscreenLoading: false,
                pageSize: pageParams.pageSize,
                curPage: 1,
                projectform: {
                    id: 0,
                    name: '',
                    staff: '',
                    depart: '',
                    id_depart: '',
                    manager: '',
                    id_manager: '',
                    state: true,
                    operation: ''
                },
                projectRules: {
                    name: [
                        { required: true, message: '请输入项目名', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                    ],
                    id_depart: [
                        { required: true, message: '请选择部门', trigger: 'blur' }
                    ],
                    id_manager: [
                        { required: true, message: '请选择负责人', trigger: 'blur' }
                    ],
                },
                depart_search: '',
                manager_search: '',
                projectlist: [],
                departlist: [],
                departlistall: [],
                managerlist: [],
                userlist: [],
                projectTotal: 0,
                isAdmin: false,
            }
        },
        mounted() {
            this.isAdmin = !isMember(this.$store.state.user.id_role)
            this.loadData()
        },
        methods: {
            loadData() {
                // 加载数据
                this.loadProjectListData({})
                // 所有部门 及 所有人员 信息
                this.$axios.get('/depart/list')
                .then(e => {
                    this.departlist = e.data.slice()
                    e.data.splice(0, 0, {id: 0, name: '全部'})
                    // console.log('部门列表', e.data)
                    this.departlistall = e.data
                    this.depart_search = 0
                })
                this.$axios.get('/project/manager/list')
                .then(e => {
                    e.data.items.splice(0, 0, {id: 0, name: '全部'})
                    // console.log('负责人列表', e.data.items)
                    this.managerlist = e.data.items
                    this.manager_search = 0
                })
                this.loadUserList({})
            },
            loadUserList(param) {
                param['number'] = 3000 //this.pageSize
                this.$axios.get('/user/list', param)
                .then(e => {
                    // console.log('人员列表', e.data)
                    this.userlist = e.data
                })
            },
            loadProjectListData(param) {
                param['keyword'] = this.jd_search
                param['id_depart'] = this.depart_search
                param['id_manager'] = this.manager_search
                param['number'] = this.pageSize
                if (!param['page']) {
                    param['page'] = 1
                }
                this.curPage = param['page']
                this.loading = true
                this.$axios.get('/project/list', param)
                .then(e => {
                    this.loading = false
                    // console.log('project 项目列表', e.data.items)
                    this.projectTotal = e.data.total
                    this.projectlist = e.data.items
                })
            },
            handleCurrentChange(val) {
                // console.log(t, val)
                this.loadProjectListData({page: val})
            },
            newProject() {
                this.addproject = true
                this.projectform.name = ''
                this.projectform.depart = ''
                this.projectform.id_depart = ''
                this.projectform.id_manager = ''
                this.projectform.manager = ''
                this.projectform.id = 0
            },
            modifyProject(item) {
                this.projectform.name = item.name
                this.projectform.depart = item.depart
                this.projectform.id_depart = item.id_depart
                this.projectform.id_manager = item.id_manager
                this.projectform.manager = item.manager
                this.projectform.id = item.id
                // console.log('this.projectform', this.projectform)
                this.addproject = true
            },
            modifyName(index) {
                // console.log(index, row)
                this.$set(this.projectlist[index], 'newname', this.projectlist[index].name)
                this.$set(this.projectlist[index], 'isset', true)
            },
            cancelModifyName(index) {
                // console.log(index, row)
                this.$set(this.projectlist[index], 'isset', false)
            },
            postModifyName(index, row) {
                // console.log(index, row)
                // 提交服务器请求
                this.$axios.post('/project/rename', {id: row.id, name: this.projectlist[index].newname} )
                .then((e) => {
                    this.projectlist[index].name = this.projectlist[index].newname
                    this.$set(this.projectlist[index], 'isset', false)
                    this.$message({
                        type: 'success',
                        message: e.msg ? e.msg : '修改成功!'
                    });
                    // this.loadProjectListData({})
                })
            },
            addProject() {
                this.$refs['projectform'].validate((valid) => {
                    if (valid) {
                        this.addproject = false
                        this.fullscreenLoading = true
                        console.log('this.projectform', this.projectform)
                        this.$axios.post('/project/add', this.projectform)
                        .then(e => {
                            // this.$refs['addUserForm'].resetFields()
                            this.fullscreenLoading = false
                            this.$message.success(e.msg ? e.msg : '操作成功')
                            // console.log('添加结果', e)
                            this.loadProjectListData({})
                        })
                        .catch(() => {
                            this.fullscreenLoading = false
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            changeStatus(row) {
                console.log(row)
                this.$axios.post('/project/status', {id: row.id, state: row.state})
                .then((e) => {
                    this.$message.success(e.msg ? e.msg : '操作成功')
                }).catch(() => {
                    row.state = !row.state
                })
            },
            deleteProject(index, row) {
                console.log(index, row)
                this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.projectlist.splice(index, 1)
                        // 提交服务器请求
                        this.$axios.post('/project/delete', {id: row.id} )
                        .then((e) => {
                            this.$message({
                                type: 'success',
                                message: e.msg ? e.msg : '删除成功!'
                            });
                            this.loadProjectListData({})
                        })
                    })
            }
        }
    }
</script>
